<template>
  <div class="Upload">
    <el-upload
      :action="action"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :show-file-list="multiple"
      :file-list="getFileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="onSuccess"
      :on-error="onError"
      name="uploadFile"
      >
      <img v-if="showImage" :src="value" class="Upload_bg">
      <i v-if="!showImage" class="el-icon-plus Upload_icon"></i>
    </el-upload>
    <p class="Upload_title" :class="{'Upload_title_error':isError}" :style="{'text-align':multiple?'left':'center'}">{{title}}</p>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { channel } from "~/config/env"
  export default {
    props: {
      multiple: {
        type: Boolean,
        default: false
      },
      title: {
        type:String,
        default: '点击上传或修改图片'
      },
      isError: {
        type: Boolean,
        default: false
      },
      value: ''
    },
    data() {
      return {
        action: `/ecp-supply/api/${channel}/supply/upload/app1.0/uploadImage`,
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: []
      };
    },
    methods: {
      handleRemove(file, fileList) {
        let urls = []
        const oldUrls = fileList
        if (!this.multiple) return urls
        oldUrls.forEach(item => {
          urls.push(item.url)
        })
        this.$emit('input', urls)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      beforeUpload (file) {
        // const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 5;
        // if (!isJPG) {
        //   this.$message.error('上传图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 5MB!');
        }
        return isLt2M;
      },
      onSuccess (res, file, fileList) {
        if (res.code == '0') {
          this.$message.success('图片上传成功')
          if (this.multiple) {
            let urls = this.value
            urls.push(res.data.url)
            this.$emit('input', urls)
          } else {
            this.$emit('input', res.data.url)
          }
        } else {
          this.$message.error(res.message)
        }
      },
      onError (res, file, fileList) {
        if (res.code == '0') {
          this.$message.error('图片上传成功')
          this.$emit('input', res.data.url)
        } else {
          this.$message.error(res.message)
        }
      }
    },
    computed: {
      showImage () {
        if (!this.multiple && 'string' === typeof(this.value) && this.value != '') {
          return true
        } else {
          return false
        }
      },
      getFileList () {
        let urls = []
        const oldUrls = this.value
        if (!this.multiple) return urls
        oldUrls.forEach(url => {
          urls.push({url: url})
        })
        return urls
      }
    }
  }
</script>

<style lang="scss" scoped>
.Upload {
  display: inline-block;
  vertical-align: middle;
  &:not(:last-child) {
    margin-right: 8px;
    margin-bottom: 8px;
  }
  & /deep/ .el-upload--picture-card {
    width: 200px;
    height: 160px;
    line-height: 160px;
  }
  & /deep/ .el-upload-list__item {
    width: 200px;
    height: 160px;
  }
  &_title {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    &_error {
      color: #f00;
    }
  }
  &_bg {
    width: 100%;
    height: 100%;
  }
  &_icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
  }
}
</style>
